{% extends "base.html" %}
{% block category %}
    <div class="subnav navbar-static-top ">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <ul class="nav">

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block detail %}
    <div class="container">
        <div class="row">
            <!-- Sidebar -->
            <div class="span9">
                <div class="well article">
                    <div class="article-head">
                        <input type="hidden" id="articleId" value="{{ article.id }}"/>

                        <div class="article-subject">{{ article.title|striptags }}
                        </div>
                        <div class="article-info">
                            <ul class="inline ">
                                <li>
                                    <i class="icon-user"></i><a href="#">{{ article_user.username }}</a>
                                </li>
                                <li>
                                    <i class="icon-time"></i>{{ article.date|date:"F j, Y" }}
                                </li>
                                <li>
                                    <i class="icon-bookmark"></i><a href="#">{{ article.category }}</a>
                                </li>
                                <li>
                                    <i class="icon-comment"></i>{{ commentCount }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="article-body">
                        {% if article.imgs %}
                            <center>
                                <img src="{{ url }}media/image/{{ article.imgs }}"
                                     class=""/>
                            </center>
                        {% endif %}
                        <p>
                            {% load urlize_blank %}
                            {{ article.content|safe }} {{ article.link|urlize_blank|safe }}
                        </p>
                    </div>
                    <div class="vote">
                        <ul class="inline">
                            <li class="up">
                                <a href="javascript:void(0);" class="btn btn-large span1" id="upvote"><i
                                        class="icon-thumbs-up"></i>{{ article.up }}
                                </a>
                            </li>
                            <li class="down">
                                <a href="javascript:void(0);" id="downvote" class="btn btn-large span1"><i
                                        class="icon-thumbs-down"></i>{{ article.down }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="article-comments">
                        <i class="icon-comments"></i> Comments
                        <div id="comment">
                            <div id="pager"></div>
                        </div>
                        <input type="hidden" value="{{ pageCount }}" id="pageCount"/>
                        <input type="hidden" value="{{ totalCount }}" id="totalCount"/>
                        <hr/>
                        <form acton="">
                            <fieldset>
                                <div class="controls">
                                    <textarea rows="3" class="span6" id="content" name="content"></textarea>
                                    <span class="help-inlne"><button type="submit" class="btn" onclick="saveComment();">
                                        Submit
                                    </button></span>

                                </div>

                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
            <!-- Body -->
            <div class="span3">
                <div class="well box">
                    <div class="media box-head profile-head">
                        <a class="pull-left" href="#">
                            <img src="{{ url }}media{{ article_user.userprofile.avatar }}" class="avatar-large"/>
                        </a>

                        <div class="media-body">
                            <span class="media-heading profile-name"><a href="#">{{ users.username }}</a></span>
                        </div>
                    </div>
                    <div class="profile-stats">
                        <table>
                            <tr>
                                <td class="stat"><a href="#"><strong>{{ articleCount }}</strong>Article</a></td>
                                <td class="stat middle"><a href="#"><strong>{{ boradCount }}</strong>Boards</a></td>
                                <td class="stat"><a href="#"><strong>{{ users.userprofile.followers }}</strong>Followers</a>
                                </td>
                            </tr>
                            {% if users.username != article_user.username %}
                                <tr>
                                    <td class="bg" colspan="3">
                                        {% if hasFollowed == 1 %}
                                            <a href="#" id="unfollow" class="btn btn-block"
                                               onclick="unfollow('{{ article_user.id }}')">Unfollow</a>
                                            <a href="#" class="btn btn-block" id="follow"
                                               onclick="follow('{{ article_user.id }}')"
                                               style="display:none">Follow</a>
                                        {% else %}
                                            <a href="#" class="btn btn-block" id="follow"
                                               onclick="follow('{{ article_user.id }}')">Follow</a>
                                            <a href="#" class="btn btn-block" id="unfollow"
                                               onclick="unfollow('{{ article_user.id }}')"
                                               style="display:none">Unfollow</a>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endif %}
                        </table>
                    </div>
                </div>
                <div class="well box">
                    <div class="box-head">Boards</div>
                    <div class="box-body">
                        <ul class="inline">
                            <li>
                                A
                            </li>
                            <li>
                                B
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

        <!-- Push -->
        <div id="push"></div>
    </div>
{% endblock %}

{% block js %}
    <script src="/js/jquery.pager.js" type="text/javascript"></script>
    <script lang="javascript">
        //默认加载
        function init(pagenumber) {
            // var data = {'pagecount':9, 'totalcount':90};
            var pageCount = $("#pageCount").val();
            var totalCount = $("#totalCount").val();
            if (null != pageCount && null != totalCount && '' != pageCount && '' != totalCount && totalCount > 0) {
                $("#pager").pager({ pagenumber: pagenumber, pagecount: pageCount, totalcount: totalCount, buttonClickCallback: PageClick});
            }
        }
        var PageClick = function (pageclickednumber) {
            queryComment(pageclickednumber);
            init(pageclickednumber);
        }

        $(document).ready(function () {
            init(1);
            queryComment(1);

            $("#report").click(function () {

            });
        });

        function report(id) {
            $.ajax({
                url: '/reportMessage/',
                data: "id=" + id + "&type=1",
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    if (data == "1") {
                        //举报成功
                    }
                }
            });
        }

        function saveComment() {
            $.ajax({
                url: '/article/saveComment/',
                data: "articleId=" + $("#articleId").val() + "&content=" + $("#content").val(),
                type: 'get',
                dataType: 'text',
                success: function (data) {
                    if (data != '1') {
                        $("#errorDiv p").append(data);
                        $("#errorDiv").show();
                    } else {
                        // $("#errorDiv p").empty();
                        //$("#errorDiv").hide();
                        location.reload();
                    }
                }
            });
        }

        function queryComment(pagenumber) {
            $.ajax({
                url: '/article/commentPage/',
                data: "articleId=" + $("#articleId").val() + "&pagenumber=" + pagenumber,
                type: 'get',
                dataType: 'html',
                success: function (data) {
                    if (data != null && data != '') {
                        var obj = $("#comment");
                        $("#comment dl").remove();
                        obj.prepend(data);
                    }
                }
            });
        }
        $(function () {
            $("#upvote").click(function () {
                $.ajax({
                    type: "get",
                    url: "/upvote/{{article.id}}",
                    dataType: "html",
                    success: function (data) {
                        alert(data);
                        location.reload();
                    }
                });
            });

            $("#downvote").click(function () {
                $.ajax({
                    type: "get",
                    url: "/downvote/{{article.id}}",
                    dataType: "html",
                    success: function (data) {
                        alert(data);
                        location.reload();
                    }
                });
            });
        });
        function follow(id) {
            $.ajax({
                type: "get",
                url: "/follow/" + id,
                dataType: "html",
                success: function (data) {
                    alert(data);
                    $("#follow").hide();
                    $("#unfollow").show();
                }
            });
        }
        function unfollow(id) {
            $.ajax({
                type: "get",
                url: "/unfollow/" + id,
                dataType: "html",
                success: function (data) {
                    alert(data);
                    $("#follow").show();
                    $("#unfollow").hide();
                }
            });
        }
    </script>
{% endblock %}
